<template>
  <el-card>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="角色名称" />
      </el-form-item>

      <el-button type="primary">查询</el-button>
      <el-button>清空</el-button>
    </el-form>

    <div style="margin: 20px 0">
      <el-button type="primary" @click="addRole">添加</el-button>
      <el-button type="danger" @click="removeRoles">批量删除</el-button>
    </div>

    <el-table
      border
      stripe
      style="width: 960px"
      @selection-change="handleSelectionChange"
      :data="roles"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column label="角色名称">
        <template v-slot="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              :icon="Refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template v-slot="{ row }">
          <el-button
            size="small"
            type="info"
            class="el-icon-user-solid"
            title="分配权限"
            @click="$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`)"
          />

          <el-button
            size="small"
            class="el-icon-check"
            type="primary"
            title="确定"
            @click="updateRole(row)"
          />
          <el-button
            size="small"
            class="el-icon-edit"
            type="primary"
            title="修改角色"
            @click="row.edit = true"
          />
          <el-button
            size="small"
            type="danger"
            title="删除角色"
            class="el-icon-delete-solid"
            @click="removeRole(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30]"
      style="padding: 20px 0;"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getRoles"
      @size-change="getRoles(1, $event)"
    />
  </el-card>
</template>

<script>
import { reqRoleList,reqAddRole } from "@/api/acl/role";
import { MessageBox } from 'element-ui';
export default {
  name: "Role",
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      roles: [], //角色列表
      roleNames: {
        roleNames: "",
        searchRoleName: ""
      }
    };
  },
  mounted() {
    this.getRoles();
  },
  methods: {
    // 1.异步获取角色分页列表
    async getRoles(page = this.page, limit = this.limit) {
      // 如果page和limit不是默认参数,则把传递过来的值赋值给data中的数据
      this.page = page;
      this.limit = limit;
      const re = await reqRoleList(page, limit);

      this.roles = re.items.map(item => {
        item.edit = false; //用于标识是否显示编辑输入框
        item.originRoleName = item.roleName; //缓存角色的名字,用于取消
        return item;
      });

      this.total = re.total;
    },
    // 添加角色
    addRole() {
      MessageBox.prompt('请输入名称','添加角色',{
        confirmButtonText: '确定',
      cancelButtonText: '取消',
      }).then(({value})=>{
        reqAddRole({roleName:value})
      }).then(()=>{
        this.$message.success('添加成功')
        this.getRoles()
      }).catch(()=>{
this.$message.warning('取消添加')
      })
    },
    removeRoles() {},
    handleSelectionChange() {},
    cancelEdit(row) {
      row.roleName = row.originRoleName;
      row.edit = false;
      this.$message.success('取消了角色修改')
    },
    updateRole() {},
    removeRole() {}
  }
};
</script>

<style></style>
